import React, { Component } from 'react'


// 导入组件样式
import './index.css'
import List from './list'

class Index extends Component {

  // 定义响应数据=》vue=>data
  state = {
    // 评论人
    name: '',
    content: '',
    // 评论列表
    list: [
      // 假数据
      { id: 0, name: '特朗普', content: '下架微信！' },
      { id: 1, name: '普京', content: '大家好！' }
    ]
  }

  // 处理表单双向绑定
  handlerInput = (e) => {
    // console.log(e.target.name)
    this.setState({
      [e.target.name]: e.target.value
    })
  }



  // 提交评论
  handlerPub = () => {
    // console.log(this.state)
    /**
     * 1. 获取评论人和评论内容
     * 2. 把最新的评论数据加入到列表中
     */
    const { name, content, list } = this.state
    // 边界判断
    if (!name || !content) {
      return alert('评论人或内容不能为空！')
    }
    const newList = [{ id: list.length + 1, name, content }, ...list]
    this.setState({
      list: newList,
      name: '',
      content: ''
    })
  }

  render () {
    return (
      <div className="box">
        <h1>评论</h1>
        {/* 发表评论 */}
        <div className="pub">
          <p><input name="name" value={this.state.name} onChange={this.handlerInput} type="text" /></p>
          <p><textarea name="content" value={this.state.content} onChange={this.handlerInput} /></p>
          <p><button onClick={this.handlerPub} className="btn">发表评论</button></p>
        </div>
        {/* 评论列表 */}
        <hr className="line" />
        {/* 列表组件 */}
        {/* 父传子 */}
        <List list={this.state.list} a="123" />
      </div>
    )
  }
}

export default Index